<template>
	<z-paging ref="paging" @query="queryList" :refresherEnabled="true" :loadingMoreEnabled="false"
		:auto="false" :hideEmptyView="true">
		<view slot="top">
			<z-nav-bar backState="1000" type="transparentFixed">商品详情</z-nav-bar>
		</view>
		<!-- 详情轮播图 -->
		<view v-if="currentSpu && currentSku">
			<view v-for="(sku,index) in currentSpu.skus" :key="index">
				<template v-if="sku.id == currentSku.id">
					<u-swiper current="0" :autoplay="false" :list="sku.bannerImageList" height="500" bgColor="#FFFFFF"></u-swiper>
				</template>
				
			</view>			
		</view>
		
		<!-- 商品信息 -->
		<view style="position: relative; top: -110rpx;" v-if="currentSpu && currentSku && !isShowSkeleton">
			<view class="bg-1 u-p-t-40" style="padding-bottom: 120rpx;">
				<view class="u-m-l-70 u-flex">
					<view class="u-flex-5">
						<view>
							<text class="u-font-40 text-bold">¥</text>
							<!-- <text class="u-font-66 text-bold">{{currentSku.sellPrice | formatMoneyToYuanIntFilter}}</text> -->
							
							<u-count-to :duration="countDuration" :startVal="0" :endVal="formatMoney(currentSku.sellPrice)" separator="," color="#000000" fontSize="34" bold :decimals="formatMoney(currentSku.sellPrice) < 1 ? 2 : 0"></u-count-to>
						</view>
						<view style="opacity: 0.5;text-decoration: line-through">
							<text>原价:</text>
							<text>{{formatMoney(currentSku.marketPrice)}}</text>
						</view>
					</view>
					<view class="u-flex-7 u-m-l-30 u-font-22 u-text-right u-m-r-30">
						<view>
							<text class="u-font-34 text-bold">全新配方 全新升级</text>
						</view>
						<view class="u-m-t-10 u-font-24" v-if="currentSpu.activityEndDate">
							<text>活动截至日期:</text>
							<text class="u-m-l-20">{{formatDate(currentSpu.activityEndDate,'YYYY年MM月DD日')}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="bg-2 u-p-t-10" style="margin-top: -90rpx;box-shadow: 0rpx 2rpx 20rpx #E8E9EA;">
				<view class="u-m-l-70 u-m-t-40 u-p-b-30">
					<view class="u-flex">
						<view>
							<text style="opacity: 0.5;" class="u-font-30 text-bold">{{currentSpu.skus.length}}组可选</text>
						</view>
						<view class="u-m-l-20 u-p-10" v-for="(item, index) in currentSpu.skus" :key="index" :class="{'selected-sku': item.id == currentSku.id}" @click="setDefaultSkuInfo(item.id)">
							<image :src="item.coverImage" class="sku-cover"></image>
						</view>
					</view>
					
					<view class="u-m-t-30 u-flex">
						<view class="u-flex-10 u-flex">
							<view class="u-m-r-10" v-for="(item, index) in currentSpu.labels" :key="index">
								<view class="tag">{{item.labelName}}</view>
							</view>
						</view>
						
						<view class="u-flex-2 u-flex u-flex-end u-m-r-10">
							<u-button text="领券" shape="circle" size="mini" :customStyle="{'backgroundColor':'#FF4747', 'color': '#FFFFFF', 'width': '140rpx'}" @click="handleCoupon">
								<view class="u-flex">
									<text class="u-m-r-10 u-font-22">领券</text>
									<u-icon name="play-circle" color="#FFFFFF"></u-icon>
								</view>
							</u-button>
						</view>
					</view>
					
					<view class="u-m-t-30">
						<text class="u-font-34 text-bold">{{currentSku.skuName}}</text>
					</view>
					
					<view class="u-m-t-30 u-m-r-10 u-p-10 b-r-10 u-flex" style="background-color: #FFEBEB;">
						<view class="u-flex-2 u-p-l-10 u-p-r-10 b-r-10 u-p-t-5 u-p-b-5 u-text-center" style="line-height: 40rpx;background-color: #FF0000;color: #FFFFFF;">
							<image src="../../static/images/goods/vip-crown-2-fill.png" style="width: 22rpx; height: 22rpx;"></image>
							<text class="u-font-22 u-m-l-10">热销值</text>
						</view>
						<view class="u-flex-9 u-m-l-20 text-red text-bold u-font-26 ">
							<text>当前热销</text>
							<text class="u-m-l-10">{{currentSku.virtualSales}}</text>
							<text v-if="parseInt(currentSku.virtualSales) >= 9999">+</text>
						</view>
						<view class="u-flex-1 u-flex u-flex-end">
							<u-icon name="play-circle-fill" color="#FF4747"></u-icon>
						</view>
					</view>
				</view>
			</view>
			
			<view class="bg-white u-p-l-70 u-m-b-40 u-m-t-40 u-flex" @click="handleNext">
				<view class="u-flex-3">
					<text class="u-font-32">选择规格</text>
				</view>
				<view class="u-flex-8" style="opacity: 0.5;">
					<text >(</text>
					<text>已选择:</text>
					<text class="u-m-l-10">{{currentSku.skuShortName}}</text>
					<text >)</text>
				</view>
				<view class="u-flex-1">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>	
			
			<view style="box-shadow: 0rpx 2rpx 40rpx #E8E9EA;border-radius: 30rpx 0rpx 0rpx 30rpx;"
						class="u-m-l-30 u-p-t-40 u-p-l-40">
				<view class="u-flex" @click="handleEvaluate">
					<view class="u-flex-11">
						<text class="text-bold u-font-30">用户评论精选</text>
					</view>
					<view class="u-flex-1">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				
				<view class="u-m-t-30 u-m-r-30">
					<u-scroll-list indicatorWidth="0">
						<view v-for="(item, index) in commentList" :key="index" class="u-m-r-20" >
							<view style="width: 400rpx;"  >
								<u-avatar :src="item.headerUrl" size="34"></u-avatar>
								<view class="u-p-t-30 u-p-l-20 u-p-r-20 u-p-b-20 b-r-30" style="border: 1rpx solid #E8E9EA; margin-top: -26rpx; margin-left: 20rpx;" 
											@click="handleEvaluate">
									<view class="u-flex">
										<view class="u-flex-8 u-line-1">
											<text class="">{{formatNickName(item.nickName)}}</text>
										</view>
										<view class="u-flex-4 u-flex u-flex-end">
											<text class="u-font-22" style="opacity: 0.5;">{{formatDate(item.createTime, 'YYYY.MM.DD')}}</text>
										</view>
									</view>
									<view class="u-m-t-10">
										<u-rate count="5" v-model="item.goodsScore" gutter="1" readonly ></u-rate>
									</view>
									<!-- style="height: 90rpx;" -->
									<view class="u-font-22 u-m-t-10 u-line-3" v-if="item.userFirstComment" style="height: 90rpx;">
										<text>{{item.userFirstComment.content}}</text>
									</view>
									
									<view class="u-flex u-m-t-20" v-if="item.commentImageList" style="height: 100rpx;">
										<view v-for="(image, imgIndex) in item.commentImageList" :key="imgIndex" class="u-p-r-10">
											<image :src="image" class="image-size"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			
			<view style="box-shadow: 0rpx 2rpx 40rpx #E8E9EA;border-radius: 30rpx 0rpx 0rpx 30rpx;"
						class="u-m-l-30 u-p-t-40 u-p-l-40 u-p-b-20 u-m-t-30">
				<view class="u-flex">
					<view class="u-flex-11">
						<text class="text-bold u-font-30">产品规格</text>
					</view>
					<view class="u-flex-1">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				
				<view class="u-m-t-30">
					<view class="u-flex">
						<view class="u-flex-2">
							<text style="opacity: 0.5;">配送</text>
						</view>
						<view class="u-flex-10">
							<text class="">免运费</text>
						</view>
					</view>
					<view class="u-flex u-m-t-10">
						<view class="u-flex-2">
							<text style="opacity: 0.5;">优惠</text>
						</view>
						<view class="u-flex-10">
							<view v-if="couponList.length > 0" @click="handleCoupon">
								<text class="text-orange">领取优惠券</text>
							</view>
							<view v-else>
								<text class="">暂无优惠券</text>
							</view>
						</view>
					</view>
					<view class="u-flex u-m-t-10">
						<view class="u-flex-2">
							<text style="opacity: 0.5;">服务</text>
						</view>
						<view class="u-flex-10 u-flex">
							<view v-for="(item, index) in currentSpu.servers" :key="index">
								<text class="">{{item.serverName}}</text>
								<text class="u-m-l-10 u-m-r-10" v-if="index < currentSpu.servers.length - 1">|</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="u-m-t-20">
				<view style="margin-top:-10rpx" v-for="(item, index) in currentSku.detailImageList" :key="index">
					<image :src="item" mode="widthFix" style="width: 100%;"></image>
				</view>
			</view>
			
			<view class="u-m-l-30 u-p-t-40 u-m-b-40 u-m-t-40" style="box-shadow: 0rpx 2rpx 40rpx #E8E9EA;border-radius: 30rpx 0rpx 0rpx 30rpx;">
				<view class="u-p-l-40">
					<text class="text-bold u-font-30">更多精选商品</text>
				</view>
				
				<view class="u-m-t-40 u-p-l-40">
					<!-- <u-scroll-list indicatorWidth="0">
						<view v-for="(item, index) in 4">
							{{item}}
						</view>
					</u-scroll-list> -->
					<HotGoodsSku ref="hotGoodsSkuRef" model="horizontal" isShowSku></HotGoodsSku>
				</view>
			</view>
		</view>
		
		<!-- #ifdef MP-WEIXIN -->
		<root-portal>
		<!-- #endif -->
			<u-popup :show="showNext" mode="bottom" :closeable="true" @close="showNext = false" v-if="currentSpu && currentSku">
				<view>
					<view class="u-text-center u-p-30">
						<text class="text-bold">选择规格</text>
					</view>
					<view class="u-p-30">
						<view class="u-flex">
							<view class="u-flex-4">
								<template v-if="currentGift">
									<image :src="currentGift.coverImage" style="width: 200rpx; height: 200rpx;"></image>
								</template>
								<template v-else>
									<image :src="currentSku.coverImage" style="width: 200rpx; height: 200rpx;"></image>
								</template>
								<!-- <image src="../../static/images/home/sku-4.png" style="width: 200rpx; height: 200rpx;"></image> -->
							</view>
							<view class="u-flex-8">
								<text class="text-bold">{{currentSku.skuName}}</text>
							</view>
						</view>
					</view>
					
					<view class="u-p-t-40 u-p-l-30 u-p-r-30" v-for="(item, index) in currentSpu.spuSpec" :key="index">
						<view>
							<text class="text-bold">{{item.value}}</text>
						</view>
						<view class="u-m-t-20 u-flex u-flex-wrap">
							<view class="spec-tag u-m-r-20 b-r-20 u-m-b-20" v-for="(spec,index1) in item.leaf" :key="index1" @click="handleSelectSpec(item, spec)">
								<view class="text-bold" :class="{'spec-tag-active': spec.isSelected}">{{spec.value}}</view>
							</view>
						</view>
					</view>
					
					<view class="u-p-30" v-if="currentSku.gifts.length > 0">
						<view>
							<text class="text-bold">选择赠品</text>
						</view>
						<view class="u-m-t-20 u-flex">
							<view class="spec-tag u-m-r-20 b-r-20" v-for="(gift,index) in currentSku.gifts" :key="index" @click="handleSelectGift(gift)">
								<view class="text-bold" :class="{'spec-tag-active': gift.isSelected}">{{gift.giftName}}</view>
							</view>
						</view>
					</view>
					
					<view class="u-p-30">
						<view>
							<text class="text-bold">数量</text>
						</view>
						<view class="u-m-t-20 u-flex">
							<u-number-box v-model="number"></u-number-box>
						</view>
					</view>
					
					<view class="u-p-30">
						<text class="u-font-60 text-bold">{{totalPrice | formatMoneyToYuanFilter}}</text>
						<text class="u-m-l-10">元</text>
					</view>
					
					<view class="u-p-30 text-center ">
						<u-button @click="handleSubmit"
									shape="circle" 
									:customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF'}">立即购买</u-button>
					</view>
				</view>
			</u-popup>
		<!-- #ifdef MP-WEIXIN -->
		</root-portal>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<root-portal>
		<!-- #endif -->
			<u-popup :show="showCoupon"
								mode="bottom" 
								closeable
								@close="showCoupon = false"
								:customStyle="{'max-height':'1000rpx'}">
				<view>
					<Coupon ref="couponDialog"></Coupon>
				</view>
			</u-popup>
		<!-- #ifdef MP-WEIXIN -->
		</root-portal>
		<!-- #endif -->
		
		<view slot="bottom">
			<view class="u-p-20 u-flex bg-white">
				<view class="u-flex-1 u-text-center">
					<button open-type="contact" plain hover-class="none" size="mini" style="border: 0px;">
						<u-icon name="server-fill" size="28"></u-icon>
					</button>
					<view class="u-font-22 u-p-t-5">客服</view>
				</view>
				<view class="u-flex-2 u-flex u-flex-end">
					<u-button text="立即购买" shape="circle" :customStyle="{'backgroundColor':'#FFB143', 'color': '#FFFFFF'}" @click="handleNext"></u-button>
				</view>
			</view>
		</view>	
			
		<Skeleton v-if="isShowSkeleton"></Skeleton>
	</z-paging>
</template>

<script>
	import {jumpTypeEnum, registerTypeEnum} from '@/common/const.js'
	import {getGoodsSpuDetail} from '@/api/goods.js'
	import Coupon from '@/pages_one/components/coupon/index.vue'
	import {getOrderCommentPage} from '@/api/order_comment.js'
	import dayjs from 'dayjs'
	import { handleName } from '@/common/util.js'
	import {mapGetters} from 'vuex'
	import {getCouponList, getCouponListByUserId} from '@/api/coupon.js'
	import HotGoodsSku from '@/components/hot_goods_sku/index.vue'
	import {Skeleton} from '@/components/skeleton/goods_detail.vue'
	
	export default{
		data(){
			return{
				registerTypeEnum,
				countDuration:1,
				showNext:false,
				number:1,
				spuId:'',
				skuId:'',
				
				// 当前商品spu
				currentSpu:null,
				// 当前商品sku
				currentSku:null,
				// 当前选择的礼品
				currentGift:null,
				// 轮播图初始位置
				swiperIndex:0,
				showCoupon: false,
				// 评论列表
				commentList:[],
				// 优惠券列表
				couponList:[],
				
				isShowSkeleton:true
			}
		},
		onLoad(e) {
			this.spuId = e.spuId
			this.skuId = e.skuId
			this.init()
		},
		onShareAppMessage(res) {
			let invitedCode = this.userInfo.invitedCode
			let type = 'goodsDetail'
			
			let params = encodeURIComponent(`spuId=${this.spuId}&skuId=${this.skuId}`)
			let url = `/pages/main/index?invitedCode=${invitedCode}&type=${type}&registerType=${registerTypeEnum.share_friend}&params=${params}`
			console.log(url)
			return {
				title: '伊利高个子母婴专卖店',
				path: url
			}
		},
		onShareTimeline(res){
			let invitedCode = this.userInfo.invitedCode
			let type = 'goodsDetail'
			
			let params = encodeURIComponent(`spuId=${this.spuId}&skuId=${this.skuId}`)
			let url = `/pages/main/index?invitedCode=${invitedCode}&type=${type}&registerType=${registerTypeEnum.share_friend_circle}&params=${params}`
			console.log(url)
			return {
				title: '伊利高个子母婴专卖店',
				path: url
			}
		},
		computed:{
			...mapGetters(['isLogin','userInfo']),
			
			/**
			 * 价格
			 */
			totalPrice(){
				if(!this.currentSku)
					return 0
				
				return this.currentSku.sellPrice * this.number
			}
		},
		components:{
			Coupon,
			HotGoodsSku,
			Skeleton
		},
		methods:{
			init(){
				this.reload()
				this.shareMenuStatus()
			},
			
			/**
			 * 判断是否可以分享
			 */
			shareMenuStatus(){
				if(this.isLogin){
					console.log("打开分享")
					uni.showShareMenu({
						menus: ['shareAppMessage', 'shareTimeline']
					})
				} else {
					console.log("关闭分享")
					uni.hideShareMenu({
						
					})
				}
			},
			
			/**
			 * 列表重新加载
			 */
			reload(){
				setTimeout(()=>{
					// 重新加载
					this.$refs.paging.reload()
				},100)
			},
			
			/**
			 * 查询商品spu信息
			 */
			queryList(pageNo, pageSize){
				
				// 获取商品详情
				getGoodsSpuDetail({
					id: this.spuId,
					skuId: this.skuId
				}).then(res=>{
					let data = res.data
					// 格式化规格
					data.spuSpec.forEach(item=>{
						// item.leaf = JSON.parse(item.leaf)
						// item.leaf.forEach(spec=>{
						// 	this.$set(spec, 'isSelected', false)
						// })
						let leafs = JSON.parse(item.leaf)
						let items = []
						leafs.forEach(leaf=>{
							data.skus.forEach(sku=>{
								let temp = sku.specs.filter(p=>p.specId == item.specId && p.specValueId == leaf.id)
								if(temp.length > 0){
									items.push(leaf)
								}
							})
						})
						item.leaf = items
					})
					// 格式化商品sku
					this.formatGoodsSku(data)
					// 设置商品信息
					this.currentSpu = data
					// 设置默认的sku
					this.setDefaultSkuInfo(this.skuId)
					// 获取评论列表
					this.getCommentList(pageNo, pageSize)
					// 获取可领取的优惠券
					this.getCouponList()
					
					// 加载热销商品
					this.$nextTick(()=>{
						this.$refs.hotGoodsSkuRef.init()
					})
					this.isShowSkeleton = false
					this.$refs.paging.complete([]);
				}).catch(res => {
					this.isShowSkeleton = false
					this.$refs.paging.complete(false);
				})
			},
			
			/**
			 * 获取评论列表
			 */
			getCommentList(pageNo, pageSize){
				// 获取评论
				getOrderCommentPage({
					spuId: this.currentSpu.id,
					current: pageNo,
					size: pageSize
				}).then(result=>{
					let data = result.data.records
					this.formatOrderComment(data)
					this.commentList = data
					console.log(this.commentList)
				})
			},
			
			/**
			 * 获取可领取优惠券列表
			 */
			getCouponList(){
				if(this.isLogin){
					// 登录的场合
					getCouponListByUserId().then(res=>{
						this.couponList = res.data
					})
				} else {
					// 未登录的场合
					getCouponList().then(res=>{
						this.couponList = res.data
					})
				}
			},
			
			/**
			 * 格式化商品sku
			 */
			formatGoodsSku(data){
				data.skus.forEach(sku=>{					
					let imageList = JSON.parse(sku.bannerImages)
					let images = []
					imageList.forEach(item=>{
						images.push(item.materialUrl)
					})
					
					// 获取sku封面
					if(!sku.hasOwnProperty('coverImage')){
						this.$set(sku, 'coverImage', images[0])
					} else {
						sku.coverImage = images[0]
					}
					
					// 获取sku轮播图
					if(!sku.hasOwnProperty('bannerImageList')){
						this.$set(sku, 'bannerImageList', images.slice(1))
					} else {
						sku.bannerImageList = images.slice(1)
					}
					// 还原成图片地址
					sku.bannerImages = images.join()
					
					imageList = JSON.parse(sku.detailImages)
					images = []
					imageList.forEach(item=>{
						images.push(item.materialUrl)
					})
					// 获取sku详情图片
					if(!sku.hasOwnProperty('detailImageList')){
						this.$set(sku, 'detailImageList', images)
					} else {
						sku.detailImageList = images
					}
					// 还原成图片地址
					sku.detailImages = images.join()
					
					// 赠品图片
					sku.gifts.forEach(gift=>{
						let data = JSON.parse(gift.coverImage)
						if(data.length > 0){
							gift.coverImage = data[0].materialUrl
						}
						gift.bannerImages = JSON.parse(gift.bannerImages).map(p=>p.materialUrl).join()
						gift.detailImages = JSON.parse(gift.detailImages).map(p=>p.materialUrl).join()
					})
				})
			},
			
			formatOrderComment(data){
				data.forEach(item=>{
					if(item.headerUrl){
						item.headerUrl = item.headerUrl
					}
					if(item.userFirstComment.commentImages){
						let images = item.userFirstComment.commentImages.split(',')
						// 获取评论图
						this.$set(item, 'commentImageList', images)
					} else {
						this.$set(item, 'commentImageList', [])
					}
				})
				
			},
			
			/**
			 * 设置当前选择的sku
			 */
			setDefaultSkuInfo(skuId){
				let skus = this.currentSpu.skus.filter(p=>p.id == skuId)
				if(skus.length > 0){
					this.currentSku = skus[0]
					this.swiperIndex = 0
					
					this.currentSku.gifts.forEach(gift=>{
						if(!gift.hasOwnProperty("isSelected")){
							this.$set(gift, 'isSelected', false)
						} else {
							gift.isSelected = false
						}
					})
					this.currentGift = null					
					this.currentSpu.spuSpec.forEach(item=>{
						item.leaf.forEach(spec=>{
							let temp = this.currentSku.specs.filter(p=>p.specValueId == spec.id)
							if(temp.length > 0){
								spec.isSelected = true
							} else {
								spec.isSelected = false
							}
						})
					})
				}
			},
			
			/**
			 * 选择规格
			 */
			handleSelectSpec(item, spec){
				this.currentSpu.skus.forEach(sku=>{
					let temp = sku.specs.filter(p=>p.specId == item.specId && p.specValueId == spec.id)
					if(temp.length > 0){
						this.setDefaultSkuInfo(sku.id)
					}
				})
			},
			
			/**
			 * 选择礼物
			 */
			handleSelectGift(gift){
				this.currentGift = gift
				this.currentSku.gifts.forEach(item=>{
					if(item.giftId == gift.giftId){
						item.isSelected = true
					} else {
						item.isSelected = false
					}
				})
			},
			
			/**
			 * 下一步
			 */
			handleNext(){
				this.number = 1
				this.showNext = true
			},
			
			/**
			 * 提交
			 */
			handleSubmit(){
				let msg = this.checkData()
				if(msg != ''){
					this.$u.toast(msg)
					return
				}
				
				this.showNext = false
				// 订单头
				let orderHeader = {
					skuDetails:[],
					giftDetails:[]
				}
				
				this.$set(this.currentSku, 'buyCount', this.number)
				// 订单sku详情
				orderHeader.skuDetails.push(this.currentSku)
				
				// 获取选择的礼品
				if(this.currentGift){
					orderHeader.giftDetails.push(this.currentGift)
				}
				// let params = `spuId=${this.spuId}&skuId=${this.skuId}`
				// this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/order/create?orderHeader=${encodeURIComponent(JSON.stringify(orderHeader))}`, true, 'goodsDetail', params)
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/order/create?orderHeader=${encodeURIComponent(JSON.stringify(orderHeader))}`, true)
			},
			
			/**
			 * 检查数据
			 */
			checkData(){
				
				// 判断当前是否选择sku
				if(this.currentSku == null){
					return '请选择一个购买商品'
				}
				
				// sku存在礼品的场合, 判断是否选择礼品
				if(this.currentSku.gifts.length > 0 && this.currentGift == null){
					return '请选择一个赠品'
				}
				
				return ''
			},
			
			/**
			 * 跳转评论
			 */
			handleEvaluate(){
				let spuId = this.currentSpu.id
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/evaluate/index?spuId=${spuId}&currentSku=${encodeURIComponent(JSON.stringify(this.currentSku))}`, false)
			},
			
			/**
			 * 领取优惠券
			 */
			handleCoupon(){
				this.showCoupon = true
				this.$nextTick(()=>{
					this.$refs.couponDialog.init()
				})
			},
			
			/**
			 * 格式化评论时间
			 */
			formatDate(val,format){
				return dayjs(val).format(format)
			},
			
			/**
			 * 名字脱敏
			 */
			formatNickName(val){
				return handleName(val)
			},
			
			/**
			 * 分转元
			 */
			formatMoney(val){
				return this.formatMoneyToYuan(val)
			},
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>

<style scoped>
	.bg-1{
		background-image: linear-gradient(to right, #FFB143, #FFECBF);
		/* height: 300rpx; */
		width: 100%;
		border-radius: 110rpx 0rpx 0rpx 0rpx;
	}
	
	.bg-2{
		background-color: #FFFFFF;
		/* height: 300rpx; */
		width: 100%;
		border-radius: 110rpx 0rpx 0rpx 0rpx;
	}
	
	.sku-cover{
		height: 93rpx;
		width: 93rpx;
	}
	
	.tag{
		background-color: #FFEBEB;
		color: #FF4747;
		padding: 5rpx 16rpx;
		border-radius: 10rpx;
		font-size: 22rpx;
	}
	
	.spec-tag{
		background-color: #F8F9FA;
		padding: 10rpx 30rpx;
	}
	
	.spec-tag-active{
		color: #FFB143;
	}
	
	.image-size{
		width: 110rpx;
		height: 110rpx;
	}
	
	.selected-sku{
		border: 2rpx solid #FF4747;
		border-radius: 20rpx;
	}
</style>